$(function(){
    var page = (function(){
        //初始化表格
        var createVm = function(){
            var mockData = [
                {curr_id:'1',curr_name:'BitMex',logo:'/images/1.png',url:'',pair_trade:'QUE / BTC',mining_ratio:'5.48 %',rebate_ratio:'0.03 %',dividend:'0.03 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'2',curr_name:'OKEX',logo:'/images/2.png',url:'',pair_trade:'HER / MER',mining_ratio:'0.03 %',rebate_ratio:'1.22 %',dividend:'0.01 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'3',curr_name:'Binance',logo:'/images/3.png',url:'',pair_trade:'SNC / ETH',mining_ratio:'2.31 %',rebate_ratio:'50.00 %',dividend:'0.04 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'4',curr_name:'Bithumb',logo:'/images/4.png',url:'',pair_trade:'MEX / BTC',mining_ratio:'12.94 %',rebate_ratio:'6.66 %',dividend:'0.97 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'5',curr_name:'BitMex',logo:'/images/1.png',url:'',pair_trade:'QUE / BTC',mining_ratio:'5.48 %',rebate_ratio:'0.03 %',dividend:'0.03 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'6',curr_name:'OKEX',logo:'/images/2.png',url:'',pair_trade:'HER / MER',mining_ratio:'0.03 %',rebate_ratio:'1.22 %',dividend:'0.01 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'7',curr_name:'OKEX',logo:'/images/2.png',url:'',pair_trade:'HER / MER',mining_ratio:'0.03 %',rebate_ratio:'1.22 %',dividend:'0.01 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'8',curr_name:'Binance',logo:'/images/3.png',url:'',pair_trade:'SNC / ETH',mining_ratio:'2.31 %',rebate_ratio:'50.00 %',dividend:'0.04 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'9',curr_name:'Bithumb',logo:'/images/4.png',url:'',pair_trade:'MEX / BTC',mining_ratio:'12.94 %',rebate_ratio:'6.66 %',dividend:'0.97 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'10',curr_name:'BitMex',logo:'/images/1.png',url:'',pair_trade:'QUE / BTC',mining_ratio:'5.48 %',rebate_ratio:'0.03 %',dividend:'0.03 %',mining_start:'2018-07-01',mining_end:'2018-07-31'},
                {curr_id:'11',curr_name:'OKEX',logo:'/images/2.png',url:'',pair_trade:'HER / MER',mining_ratio:'0.03 %',rebate_ratio:'1.22 %',dividend:'0.01 %',mining_start:'2018-07-01',mining_end:'2018-07-31'}
            ];
            //创建实例对象
            var vm = new Vue({
                el:'.container',
                data:{
                    setOrders:{
                        id:1,
                        moRat:1,
                        divRat:1
                    },
                    sortKey:'',
                    nameNum:0,
                    trPairNum:0,
                    searchContent: "",
                    items: mockData,
                    columns:['curr_name','pair_trade']
                },
                computed: {
                    filterData: function () {
                        var sortKey = this.sortKey;
                        var order = this.setOrders[sortKey];
                        var searchContent = this.searchContent && this.searchContent.toLowerCase();
                        var items = this.items;
                        var items1;
                        var cols = this.columns;

                        if (searchContent) {
                            var nameNum = 0,trPairNum =0;
                            items1 = items.filter(function (item) {
                                //Object.keys(item)遍历item对象里面的键值是否符合回调函数的测试，通过测试则返回true，否则为false。
                                return cols.some(function (key) {
                                    if(String(item[key]).toLowerCase().match(searchContent)){
                                        key == "name" ? nameNum++ : trPairNum++;
                                    }
                                    return String(item[key]).toLowerCase().match(searchContent)
                                })
                            })
                            this.nameNum = nameNum;
                            this.trPairNum =trPairNum;
                        } else {
                            items1 = this.items
                            this.nameNum = 0;
                            this.trPairNum =0;
                        }
                        if (sortKey) {
                            items1.sort(function(a, b) {
                                a = parseFloat(a[sortKey]);
                                b = parseFloat(b[sortKey]);
                                return order > 0 ? a > b : a < b
                            })
                        }
                        return items1
                    }
                },
                methods:{
                    //对一个包含对象的数组的排序，需要提供一个对象键并以此值来进行排序
                    order: function(key) {
                        $(".tabs li").removeClass("cur");
                        $("."+ key).addClass("cur");
                        this.sortKey = key;
                        this.setOrders[key] = this.setOrders[key] * -1
                    },
                    //焦点
                    focus: function() {
                        document.getElementById("search-query").classList.add("focus");
                    },
                    blur:function(){
                        document.getElementById("search-query").classList.remove("focus");
                    }
                }
            })
            return vm;
        }
        //屏幕滚动监听
        var scroll = function(vm){
            window.onscroll = function(){
                //变量scrollTop是滚动条滚动时，距离顶部的距离
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                //变量windowHeight是可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                //滚动条到底部的条件
                if(scrollTop + windowHeight == scrollHeight){
                    //写后台加载数据的函数
                    $(".loading").removeClass("hide");
                    var data = [
                        {id:'18',name:'BitMex',img:'/images/1.png',url:'',trPair:'QUE / BTC',moRat:'5.48 %',invRe:'0.03 %',divRat:'0.03 %',duration:'07.17 - 08.30'},
                        {id:'19',name:'BitMex',img:'/images/1.png',url:'',trPair:'QUE / BTC',moRat:'5.48 %',invRe:'0.03 %',divRat:'0.03 %',duration:'07.17 - 08.30'},
                        {id:'20',name:'BitMex',img:'/images/1.png',url:'',trPair:'QUE / BTC',moRat:'5.48 %',invRe:'0.03 %',divRat:'0.03 %',duration:'07.17 - 08.30'},
                        {id:'21',name:'BitMex',img:'/images/1.png',url:'',trPair:'QUE / BTC',moRat:'5.48 %',invRe:'0.03 %',divRat:'0.03 %',duration:'07.17 - 08.30'},
                        {id:'22',name:'BitMex',img:'/images/1.png',url:'',trPair:'QUE / BTC',moRat:'5.48 %',invRe:'0.03 %',divRat:'0.03 %',duration:'07.17 - 08.30'},
                        {id:'23',name:'BitMex',img:'/images/1.png',url:'',trPair:'QUE / BTC',moRat:'5.48 %',invRe:'0.03 %',divRat:'0.03 %',duration:'07.17 - 08.30'},
                        {id:'24',name:'BitMex',img:'/images/1.png',url:'',trPair:'QUE / BTC',moRat:'5.48 %',invRe:'0.03 %',divRat:'0.03 %',duration:'07.17 - 08.30'}
                    ];
                    // console.log(vm.items);
                    vm.items = vm.items.concat(data);
                }else{
                    $(".loading").addClass("hide");
                }
            }
        }
        //初始化函数
        var init = function(){
            var vm = createVm();
            scroll(vm);
        };

        return{
            init: init
        }
    })();

    page.init();
})